<template>
  <div class="dropzone needsclick dz-clickable" :id="name">
    <div class="dz-message needsclick">点击或拖拽文件上传</div>
    <input type="hidden" v-for="key in keys" :name="name" :value="key">
  </div>
</template>

<script>
  export default {
    props: {
      action: {
        type: String,
      },
      name: {
        type: String,
        default: "images",
      },
      maxFiles: {
        type: Number,
        default: 1,
      },
      acceptedFiles: {
        type: String,
      },
      uploadMultiple: {
        type: Boolean,
        default: false,
      },
      domain: {
        type: String
      },
      defaultKeys: {
        type: Array,
        default: [],
      },
      formData: {
        type: Object,
        default: {},
      },
    },
    data() {
      return {
        keys: this.defaultKeys,
      }
    },
    mounted: function () {

      Dropzone.autoDiscover = false;

      let _this = this;

      $("#" + this.name).dropzone({
        url: this.action,
        maxFiles: this.maxFiles,
        acceptedFiles: this.acceptedFiles,
        uploadMultiple: this.uploadMultiple,
        addRemoveLinks: this.maxFiles !== 1,
        filesizeBase: 1024,
        dictCancelUpload: "取消",
        dictRemoveFile: "删除",
        dictInvalidFileType: "不支持该格式文件",
        dictMaxFilesExceeded: "超出最大上传文件数",
        dictFileTooBig: "最大上传大小为{{maxFilesize}}MB，当前文件大小为{{filesize}}MB",

        init: function (file, response) {

          this.on("sending", function (file, xhr, formData) {
            $.each(_this.formData, function (key, value) {
              formData.append(key, value);
            });
          });

          this.on("success", function (file, response) {
            _this.keys.push(response.file_name);
            file.key = response.file_name;
            file.dataURL = response.file_path;
          });

          this.on("removedfile", function (file) {
              _this.keys.splice($.inArray(file.key, _this.keys), 1);
          });

          this.on("thumbnail", function (file, dataUrl) {
            file.previewElement.addEventListener("click", function() {
              if (file.dataURL) {
                window.open(file.dataURL);
              }
            });
          });

          this.on("error", function (file, errorMessage) {
            if (file.status != 'canceled') {
              this.removeFile(file);
              if (errorMessage.error) {
                errorMessage = errorMessage.error;
              } else {
                try {
                    errorMessage = eval('(' + errorMessage + ')');
                } catch(e) {

                }
              }
              alert(errorMessage);
            }
          });

          this.on("addedfile", function (file) {
            if (_this.maxFiles === 1 && _this.uploadMultiple === false && this.getAcceptedFiles().length === 1) {
              this.removeFile(this.files[0]);
            }
          });

          $.each(_this.keys, (key, value) => {

            let url = 'http://' + _this.domain + '/' + value;
            let mockFile = { accepted: true, key: value, dataURL: url };

            this.emit("addedfile", mockFile);
            this.files.push(mockFile);
            this.createThumbnailFromUrl(
              mockFile,
              this.options.thumbnailWidth,
              this.options.thumbnailHeight,
              this.options.thumbnailMethod,
              true,
              (thumbnail) => {
                this.emit('thumbnail', mockFile, thumbnail);
                this.emit("complete", mockFile);
              },
              "anonymous"
            );
          });
        }
      });
    }
  }
</script>

<style lang="scss">

  .dropzone {
      background: white;
      border-radius: 5px;
      border: 2px dashed #0087F7;
      min-height: 216px;
      padding: auto;
      margin-bottom: 15px;
  }

  .dropzone .dz-message {
      margin: 78px 0;
  }

  .dropzone .dz-default-file {
      display: none;
  }

  .dropzone .dz-preview .dz-details {
      display: none;
  }
</style>